import _ from 'lodash';
import React, {Component} from 'react';
import { useRef, useState } from 'react';
import {ActivityIndicator, StyleSheet, ScrollView} from 'react-native';
import {
  Assets,
  TabController,
  Colors,
  View,
  Text,
  Button,
  TabControllerItemProps,
  TabControllerImperativeMethods,
} from 'react-native-ui-lib';
import {TestCase, TestSuite} from '@rnoh/testerino';

import Tab1 from './tab1';
import Tab2 from './tab2';
import Tab3 from './tab3';

const TABS = [
  'Home',
  'Posts',
  'Reviews',
  'Videos',
  'Photos',
  'Events',
  'About',
  'Community',
  'Groups',
  'Offers',
];

interface State {
  asCarousel: boolean;
  centerSelected: boolean;
  fewItems: boolean;
  nestedInScrollViewStatus: boolean,
  initialIndex: number;
  selectedIndex: number;
  key: string | number;
  items: TabControllerItemProps[];
}

class TabControllerScreen extends Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      asCarousel: true,
      centerSelected: false,
      fewItems: false,
      nestedInScrollViewStatus: false,
      initialIndex: 0,
      selectedIndex: 0,
      key: Date.now(),
      items: this.generateTabItems(false),
    };
  }
  tabController = React.createRef<TabControllerImperativeMethods>();

  generateTabItems = (
    fewItems = this.state.fewItems,
  ): TabControllerItemProps[] => {
    // @ts-expect-error
    const items: TabControllerItemProps[] = _.flow(
      tabs => _.take(tabs, fewItems ? 3 : TABS.length),
      (tabs: TabControllerItemProps[]) =>
        _.map<TabControllerItemProps>(
          tabs,
          (tab: TabControllerItemProps, index: number) => ({
            label: tab,
            key: tab,
            icon: index === 2 ? Assets.icons.demo.dashboard : undefined,
            badge: index === 5 ? {label: '2'} : undefined,
            leadingAccessory:
              index === 3 ? (
                <Text marginR-4>{Assets.emojis.movie_camera}</Text>
              ) : undefined,
            trailingAccessory:
              index === 4 ? (
                <Text marginL-4>{Assets.emojis.camera}</Text>
              ) : undefined,
          }),
        ),
    )(TABS);

    const addItem: TabControllerItemProps & {key: string} = {
      icon: Assets.icons.demo.add,
      key: 'add',
      ignore: true,
      width: 60,
      onPress: this.onAddItem,
    };

    return fewItems ? items : [...items, addItem];
  };

  componentDidMount() {
    // this.slow();
  }

  slow() {
    setTimeout(() => {
      _.times(5000, () => {
        console.log('slow log');
      });

      this.slow();
    }, 10);
  }

  setTab = () => {
    this.tabController.current?.setTab(2);
  };

  onAddItem = () => {
    const {items} = this.state;
    let newItems = items.slice(0, -1) as TabControllerItemProps[];
    newItems = [
      ...newItems,
      {label: `New Item # ${newItems.length + 1}`},
      items[items.length - 1],
    ];
    this.setState({items: newItems});
  };

  toggleItemsCount = () => {
    const {fewItems} = this.state;
    const items = this.generateTabItems(!fewItems);
    this.setState({fewItems: !fewItems, items, key: Date.now()});
  };

  toggleItemsNestedInScrollViewStatus = () => {
    const {nestedInScrollViewStatus} = this.state;
    this.setState({nestedInScrollViewStatus: !nestedInScrollViewStatus});
  };

  toggleCarouselMode = () => {
    this.setState({
      asCarousel: !this.state.asCarousel,
      key: this.state.asCarousel ? 'asCarousel' : 'staticPages',
    });
  };

  toggleCenterSelected = () => {
    const {fewItems, centerSelected} = this.state;
    this.setState({
      items: this.generateTabItems(fewItems),
      centerSelected: !centerSelected,
      key: Date.now(),
    });
  };

  onChangeIndex = (selectedIndex: number) => {
    this.setState({selectedIndex});
  };

  renderLoadingPage() {
    return (
      <View flex center>
        <ActivityIndicator size="large" />
        <Text text60L marginT-10>
          Loading
        </Text>
      </View>
    );
  }

  renderTabPages() {
    const {asCarousel, fewItems} = this.state;
    const Container = asCarousel ? TabController.PageCarousel : View;
    const containerProps = asCarousel ? {} : {flex: true};
    return (
      <Container {...containerProps} onMomentumScrollEnd={(event) => {
        let page = Math.floor((event.nativeEvent.contentOffset.x + 1)/374);
        this.tabController.current?.setTab(page);
      }}>
        <TabController.TabPage index={0}>
          <Tab1 />
        </TabController.TabPage>
        <TabController.TabPage index={1}>
          <Tab2 />
        </TabController.TabPage>
        <TabController.TabPage
          index={2}
          lazy
          lazyLoadTime={1500}
          renderLoading={this.renderLoadingPage}>
          <Tab3 />
        </TabController.TabPage>

        {!fewItems &&
          _.map(_.takeRight(TABS, TABS.length - 3), (title, index) => {
            return (
              <TabController.TabPage key={title} index={index + 3}>
                <View padding-s5>
                  <Text text40>{title}</Text>
                </View>
              </TabController.TabPage>
            );
          })}
      </Container>
    );
  }
  render() {
    const {key, initialIndex, asCarousel, centerSelected, fewItems, items, nestedInScrollViewStatus} =
      this.state;

    return (
      <TestSuite name="TabController">
        <TestCase itShould="例子">
          <View flex style={{height: 600, width: 348, overflow: 'hidden'}}>
            <View flex bg-$backgroundDefault>
              <TabController
                key={key}
                ref={this.tabController}
                asCarousel={asCarousel}
                initialIndex={initialIndex}
                onChangeIndex={this.onChangeIndex}
                items={items}>
                <TabController.TabBar
                  // items={items}
                  key={key}
                  containerStyle={{width: 348, overflow: 'hidden'}}
                  // uppercase
                  // indicatorStyle={{backgroundColor: 'green', height: 3}}
                  // indicatorInsets={0}
                  spreadItems={!fewItems}
                  backgroundColor={fewItems ? 'transparent' : undefined}
                  // labelColor={'green'}
                  // selectedLabelColor={'red'}
                  labelStyle={styles.labelStyle}
                  selectedLabelStyle={styles.selectedLabelStyle}
                  // iconColor={'green'}
                  // selectedIconColor={'blue'}
                  enableShadow
                  activeBackgroundColor={Colors.$backgroundPrimaryMedium}
                  centerSelected={centerSelected}
                />
                {this.renderTabPages()}
              </TabController>
              <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
                <Button
                  bg-green10={!fewItems}
                  bg-green30={fewItems}
                  label={fewItems ? 'Show Many Items' : 'Show Few Items'}
                  marginB-12
                  size={Button.sizes.small}
                  onPress={this.toggleItemsCount}
                />
                <Button
                  label="setTab (Imperative)"
                  bg-green10
                  onPress={this.setTab}
                  size={Button.sizes.small}
                />
              </View>
            </View>
          </View>
        </TestCase>

        <TestCase itShould="例子">
          <View flex style={{height: 600, width: 348, overflow: 'hidden'}}>
            <View flex bg-$backgroundDefault>
              <ScrollView 
                contentContainerStyle={styles.container}
                horizontal={true}
              >
                <View style={styles.tabContainer}>
                  <TabController 
                    nestedInScrollView={nestedInScrollViewStatus}
                    asCarousel={asCarousel}
                    initialIndex={initialIndex}
                    onChangeIndex={this.onChangeIndex}
                    items={[
                      { label: 'home' }, 
                      { label: 'posts' }, 
                      { label: 'reviews' }, 
                      { label: 'video' }, 
                      { label: 'photos' }
                    ]}
                  >
                    <TabController.TabBar 
                      enableShadow={false}
                      backgroundColor="transparent" labelStyle={{ width: 100 }}
                    />
                    <View style={styles.tabContent}>
                      <TabController.PageCarousel>
                        <TabController.TabPage index={0} style={{ backgroundColor: '#ffffff' }}>
                          <Text>home...</Text>
                        </TabController.TabPage>
                        <TabController.TabPage index={1} style={{ backgroundColor: '#ffffff' }}>
                          <Text>posts...</Text>
                        </TabController.TabPage>
                        <TabController.TabPage index={2} style={{ backgroundColor: '#ffffff' }}>
                          <Text>reviews...</Text>
                        </TabController.TabPage>
                        <TabController.TabPage index={3} style={{ backgroundColor: '#ffffff' }}>
                          <Text>video...</Text>
                        </TabController.TabPage>
                        <TabController.TabPage index={4} style={{ backgroundColor: '#ffffff' }}>
                          <Text>photos...</Text>
                        </TabController.TabPage>
                      </TabController.PageCarousel>
                    </View>
                  </TabController>
                </View>
              </ScrollView>
              
              <View absB left margin-20 marginB-100 style={{zIndex: 1}}>
                <Button
                  bg-green10={!nestedInScrollViewStatus}
                  bg-red30={nestedInScrollViewStatus}
                  label={nestedInScrollViewStatus ? 'nestedInScrollView = true' : 'nestedInScrollView = false'}
                  marginB-12
                  size={Button.sizes.small}
                  onPress={this.toggleItemsNestedInScrollViewStatus}
                />
              </View>
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

export default TabControllerScreen;

const styles = StyleSheet.create({
  labelStyle: {
    fontSize: 16,
  },
  selectedLabelStyle: {
    fontSize: 16,
  },
  container: {
    paddingBottom: 50
  },
  header: {
    height: 200,
    backgroundColor: '#6200ee',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 50
  },
  headerText: {
    fontSize: 24,
    color: 'white',
    fontWeight: 'bold'
  },
  subtitle: {
    fontSize: 16,
    color: 'rgba(255,255,255,0.8)',
    marginTop: 10
  },
  contentBlock: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#eee'
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10
  },
  tabContainer: {
    minHeight: 1500 * 0.6,
    backgroundColor: '#fff'
  },
  tabContent: {
    flex: 1,
    padding: 20
  },
  footer: {
    padding: 30,
    backgroundColor: '#f9f9f9',
    alignItems: 'center'
  }
});